<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>JQ应用章 第二课</title>
	<script src="./js/Jquery.js"></script>
</head>

<body id="body">
	<h1 align="center">JQ应用</h1>
	<hr>
	<ol>
		<li>JQ事件</li>
		<li>JQ动画</li>
	</ol>

	<p>演示：</p>

		<p><a class="hide" href="">隐藏触发器</a></p>
		<p><a class="show" href="">显示触发器</a></p>
		<p><a class="toggle" href="">触发器</a></p>
		<div class="test-div">
			<p>这里是演示数据</p>
			<button>演示提示</button>
		</div>
		<!-- <button>演示提示</button> -->

	<script>
		// // $('button').dblclick(function() {
		// // 	alert(1);
		// // });
		
		// // $('button').click(function(){
		// // 	alert(1);
		// // });
		
		// $(window).resize(function() {
		// 	alert(1);
		// });

		// var br = '';		
		// for (var i = 100; i >= 0; i--) {
		// 	br += '<br>';
		// }
		// 	$('.test-div').after(br);
		
		// $('a.hide').on('click', function(e) {
		// 	e.preventDefault();
		// 	$('.test-div').fadeOut(1000);
		// });
		// $('a.show').on('click', function(e) {
		// 	e.preventDefault();
		// 	$('.test-div').fadeIn(1000);
		// });

		// $('a.toggle').on('click', function(e) {
		// 	e.preventDefault();
		// 	// $('.test-div').fadeToggle(1000);
		// 	$('.test-div').animate({
		// 		height : '100px'
		// 	}, 500);
		// });


		
		// $(window).scroll(function(){
		// 	console.log($(window).scrollTop());
		// });

		// // $('button').on('click', function(){
		// // 	$('button').after('<button>第二按钮</button>');
		// // });

		// $('.test-div').on('click', function(){
		// 	$(this).before('<button>第二按钮</button>');
		// });
		// $('.test-div button').on('click', function(){
		// 	alert(111);
		// });

		// // 事件冒泡原理

		// $('button').off('click');

		// bind unbind

		// click
		// dblclick
		// mouseover
		// mouseout
		// mouseleave
		// mousedown
		// mouseup
		// 
		// keydown
		// keyup
		// keypress
		// 
		// focus
		// blur
		// change
		// 
		// on
		// off
		// bind
		// one
		// 
		// trigger
		
		// 作业1：所有JQ事件全部练习一遍,动画练一遍
		// 作业2：http://www.apple.com/ 苹果手机网站的菜单效果完整的还原出来
		// 作业3：http://www.htmleaf.com/jQuery/Layout-Interface/201512212932.html 滚动元素延迟进入插件
		
		
	</script>
</body>
</html>